<template>
  <div>
    <el-header class="el-header">
      <div>
        <img class="avatar-36 margin-left-10" src="https://img-blog.csdnimg.cn/2020102820095920.jpg">
        <h4>后台管理</h4>
      </div>
      <el-button type="info" @click="quit">退出</el-button>
    </el-header>
  </div>
</template>

<script>
  export default {
    name: "Header",
    methods: {
      quit() {
        //清除 session中的 token
        window.sessionStorage.clear();
        this.$router.push("/login")
      },
    }
  }
</script>

<style scoped>
  .el-header {
    background-color: #373D41;
    display: flex;
    justify-content: space-between;
    padding-left: 0px;
    align-items: center;
    color: white;
    font-size: 20px;
  }
  .el-header > div{
    display: flex;
    align-items: center;
  }
  .el-header > div > h4{
    padding-left: 10px;
  }
  .el-aside {
    background-color: #333744;
  }
  .el-main {
    background-color: #eaedf1;
  }
  .home-container {
    height: 100%;
  }
  .menu-toggle-button {
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    color: white;
  }
  .el-aside {
    transition: 0.5s;
  }
</style>